<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Menu 菜单1</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.flex-grow {
	flex-grow: 1;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">顶栏</el-divider><!-- =============================================================== -->
	<p class="desc">顶部栏菜单可以在各种场景中使用。</p>
	<p class="desc">导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 </p>
	<p class="desc">Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。</p>
	<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		<el-menu-item index="1">Processing Center</el-menu-item>
		<el-sub-menu index="2">
			<template #title>Workspace</template>
			<el-menu-item index="2-1">item one</el-menu-item>
			<el-menu-item index="2-2">item two</el-menu-item>
			<el-menu-item index="2-3">item three</el-menu-item>
			<el-sub-menu index="2-4">
				<template #title>item four</template>
				<el-menu-item index="2-4-1">item one</el-menu-item>
				<el-menu-item index="2-4-2">item two</el-menu-item>
				<el-menu-item index="2-4-3">item three</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>
		<el-menu-item index="3" disabled>Info</el-menu-item>
		<el-menu-item index="4">Orders</el-menu-item>
	</el-menu>
	
	<div class="h10"></div>
	
	<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
		background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">Processing Center</el-menu-item>
		<el-sub-menu index="2">
			<template #title>Workspace</template>
			<el-menu-item index="2-1">item one</el-menu-item>
			<el-menu-item index="2-2">item two</el-menu-item>
			<el-menu-item index="2-3">item three</el-menu-item>
			<el-sub-menu index="2-4">
				<template #title>item four</template>
				<el-menu-item index="2-4-1">item one</el-menu-item>
				<el-menu-item index="2-4-2">item two</el-menu-item>
				<el-menu-item index="2-4-3">item three</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>
		<el-menu-item index="3" disabled>Info</el-menu-item>
		<el-menu-item index="4">Orders</el-menu-item>
	</el-menu>
	
	<el-divider content-position="left">左右</el-divider><!-- =============================================================== -->
	<p class="desc">您可以将菜单项放置在左边或右边。</p>
	<el-menu :default-active="activeIndex3" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
		<el-menu-item index="0">LOGO</el-menu-item>
		<el-menu-item index="3">占位导航</el-menu-item>
		<div class="flex-grow"></div>
		<el-menu-item index="1">Processing Center</el-menu-item>
		<el-sub-menu index="2">
			<template #title>Workspace</template>
			<el-menu-item index="2-1">item one</el-menu-item>
			<el-menu-item index="2-2">item two</el-menu-item>
			<el-menu-item index="2-3">item three</el-menu-item>
			<el-sub-menu index="2-4">
				<template #title>item four</template>
				<el-menu-item index="2-4-1">item one</el-menu-item>
				<el-menu-item index="2-4-2">item two</el-menu-item>
				<el-menu-item index="2-4-3">item three</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>
	</el-menu>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			activeIndex: '1',
			activeIndex2: '1',
			activeIndex3: '1',
		}
	},
	methods:{
		handleSelect(key, keyPath){
			console.log(key, keyPath);
		},
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>